<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>API稳定性测试报告</title>
    <style>
      body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        line-height: 1.6;
        color: #333;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f5f5f5;
      }
      .container {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 30px;
      }
      h1,
      h2,
      h3 {
        color: #2c3e50;
      }
      h1 {
        text-align: center;
        margin-bottom: 30px;
        padding-bottom: 15px;
        border-bottom: 2px solid #eee;
      }
      .summary-box {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 30px;
      }
      .summary-item {
        flex: 1;
        min-width: 200px;
        background-color: #f8f9fa;
        border-radius: 6px;
        padding: 15px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }
      .summary-item h3 {
        margin-top: 0;
        font-size: 16px;
        color: #6c757d;
      }
      .summary-item p {
        font-size: 24px;
        font-weight: bold;
        margin: 10px 0 0;
        color: #343a40;
      }
      .success {
        color: #28a745;
      }
      .warning {
        color: #ffc107;
      }
      .danger {
        color: #dc3545;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        font-size: 14px;
      }
      th,
      td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #ddd;
      }
      th {
        background-color: #f8f9fa;
        font-weight: 600;
      }
      tr:hover {
        background-color: #f1f1f1;
      }
      .chart-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin: 30px 0;
      }
      .chart {
        flex: 1;
        min-width: 300px;
        height: 300px;
        background-color: #fff;
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        padding: 15px;
      }
      .progress-bar {
        height: 20px;
        background-color: #e9ecef;
        border-radius: 4px;
        margin-top: 8px;
        overflow: hidden;
      }
      .progress-fill {
        height: 100%;
        background-color: #007bff;
        border-radius: 4px;
      }
      .meta-info {
        font-size: 12px;
        color: #6c757d;
        text-align: right;
        margin-top: 40px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>API稳定性测试报告</h1>

      <div class="summary-box">
        <div class="summary-item">
          <h3>总请求数</h3>
          <p>390</p>
        </div>
        <div class="summary-item">
          <h3>成功率</h3>
          <p class="danger">18.72%</p>
        </div>
        <div class="summary-item">
          <h3>平均响应时间</h3>
          <p>138.80 ms</p>
        </div>
        <div class="summary-item">
          <h3>格式验证通过率</h3>
          <p class="danger">20.28%</p>
        </div>
        <div class="summary-item">
          <h3>错误处理正确率</h3>
          <p class="danger">0.00%</p>
        </div>
      </div>

      <h2>端点性能</h2>
      <table>
        <thead>
          <tr>
            <th>端点</th>
            <th>请求数</th>
            <th>成功率</th>
            <th>格式有效率</th>
            <th>平均响应时间</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>/api/config</td>
            <td>60</td>
            <td class="danger">33.33%</td>
            <td class="danger">33.33%</td>
            <td>73.40 ms</td>
          </tr>

          <tr>
            <td>/api/typewriter-texts</td>
            <td>60</td>
            <td class="danger">33.33%</td>
            <td class="danger">33.33%</td>
            <td>66.92 ms</td>
          </tr>

          <tr>
            <td>/api/projects?limit=10&page=1</td>
            <td>60</td>
            <td class="danger">30.00%</td>
            <td class="danger">30.00%</td>
            <td>46.05 ms</td>
          </tr>

          <tr>
            <td>/api/blogs?limit=10&page=1</td>
            <td>60</td>
            <td class="danger">0.00%</td>
            <td class="danger">0.00%</td>
            <td>16.11 ms</td>
          </tr>

          <tr>
            <td>/api/tech-stack</td>
            <td>60</td>
            <td class="danger">0.00%</td>
            <td class="danger">0.00%</td>
            <td>11.32 ms</td>
          </tr>

          <tr>
            <td>/health</td>
            <td>60</td>
            <td class="danger">25.00%</td>
            <td class="danger">25.00%</td>
            <td>24.48 ms</td>
          </tr>
        </tbody>
      </table>

      <h2>状态码分布</h2>
      <table>
        <thead>
          <tr>
            <th>状态码</th>
            <th>次数</th>
            <th>百分比</th>
            <th>分布</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>200</td>
            <td>73</td>
            <td>18.72%</td>
            <td>
              <div class="progress-bar">
                <div
                  class="progress-fill"
                  style="width: 18.71794871794872%"
                ></div>
              </div>
            </td>
          </tr>

          <tr>
            <td>429</td>
            <td>317</td>
            <td>81.28%</td>
            <td>
              <div class="progress-bar">
                <div
                  class="progress-fill"
                  style="width: 81.28205128205128%"
                ></div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="meta-info">
        <p>测试时间: 2025-07-23T15:51:43.185Z</p>
      </div>
    </div>

    <script>
      // 可以添加一些交互性JavaScript
    </script>
  </body>
</html>
